<template>
  <div class="login-cantainer">
    <!-- <video
      class="video"
      src="../../assets/video/bg-video.mp4"
      muted
      autoplay="true"
      loop="loop"
    ></video> -->
    <div class="bg2"><img src="../../assets/img/thumb-1920-819005.jpg" alt="" /></div>
    <!-- 验证表单时prop这个字段必须添加 -->
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="login-loginForm"
    >
      <h1 class="title">CRM管理系统</h1>
       <i @click="isErweiLogin=!isErweiLogin" 
       :class="['jiaobiao','iconfont',isErweiLogin?'icon-diannao':'icon-erweimajiaobiao']">
       </i>
     <!-- 正常登陆 -->
      <div class="commen-login" v-if="!isErweiLogin">
       
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="captcha">
          <el-input
            v-model="loginForm.captcha"
            maxlength="5"
            class="captcha"
            ref="captcha"
            @keydown.native.13="submitForm('loginForm')"
          ></el-input>

          <span
            class="captchaSvg"
            v-html="captchaSvg"
            @click="fetchCaptcha"
          ></span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')"
            >登录</el-button
          >
        </el-form-item>
      </div>
      <!-- 切换二维码登入 -->
      <div class="erwei" v-else>
        <div class="img">
          <img :src="qrDataURL" alt="" width="200px">
          <i class="mask" v-show="isScanCodeSuccess"
          :style="qrStyle" @click="getQrcode"
          ></i>
        </div>
        <p v-text="qrtip">请使用手机微信扫码登入</p>
      </div>
    </el-form>
  </div>
</template>
<script>
import * as Userapi from "../../api/users";
import { mapMutations } from "vuex";
// 引入socket.io
// 引入生成二维码的插件qrcode
import io from "socket.io-client"
import qrcode from "qrcode"
//引入扫码成功和失效的图片
import codeSuccessImg from "../../assets/img/成功.png" 
import codeInvalindImg from "../../assets/img/失效.png"
//校验函数
var validateUsername = (rule, value, callback) => {
  //value表单输入值
  //callback传入了参数 说明表单校验不通过，不传参数说明表单校验通过
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    //校验通过
    callback();
  } else {
    callback("用户名:4到16位(字母、数字、下划线)");
  }
};
var validatePassword = (rule, value, callback) => {
  if (!value) {
    callback("密码不能为空");
  } else {
    callback();
  }
};
var validateCaptcha = (rule, value, callback) => {
  if (!value) {
    callback("验证码不能为空");
  } else {
    callback();
  }
};
export default {
  data() {
    return {
      isErweiLogin:false,//是否二维码登入
      captchaSvg: "",//验证码svg
      isScanCodeSuccess:false,//是否扫码成功遮罩层
      qrDataURL:"",//二维码base64的图片地址
      qrtip:"",//切换二维码登录提示的文字
      qrStyle:{
        backgroundImage:`url(${codeSuccessImg})`
      },
      loginForm: {//登入输入框的数据`
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  created() {
  
    //获取验证码
    this.fetchCaptcha();
  },
  methods: {
      // 封装一个获取二维码地址的方法
    getQrcode(){
      // 关掉qrcode的遮罩
        this.isScanCodeSuccess=false;
        // 让遮罩层的样式初始化
        this.qrStyle.backgroundImage=`url(${codeSuccessImg})`
        // 从本地取出sid
        let sid=localStorage.getItem("bd-sid");
        if(!sid){
          this.$message.error("没有sid");
          return;
        }
        Userapi.getQrcodeUrlApi(sid).then((res)=>{
          //更改qrtip的提示
          this.qrtip="请使用手机微信扫码登入"
          // console.log(res);
          let qrUrl=res.data.scanCodeUrl;
          // 3.通过qrcode将二维码地址生成二维码base64
          qrcode.toDataURL(qrUrl,(err,dataUrl)=>{
            this.qrDataURL=dataUrl;
          });
          
        });
    },
    //映射vux的方法
    ...mapMutations(["SET_USERINFO"]),
    // 封装一个方法专门用于获取验证码
    fetchCaptcha() {
      Userapi.getCaptchaApi().then((res) => {
        // console.log(res);
        this.captchaSvg = res.data.img;
      });
    },
    submitForm(formName) {
      //验证本地表单是否通过
      this.$refs[formName].validate((valid, unpass) => {
        // console.log(unpass); 未通过校验的字段
        if (valid) {
          //本地表单校验通过
          //打开loading动画
          const loading = this.$loading({
          lock: true,
          text: 'Loading正在登录...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
          //首先需要发送请求校验验证码是否正确如果正确，
         
          let { captcha, username, password } = this.loginForm;
          Userapi.verifyCaptchaApi(captcha.toLowerCase()).then((res) => {
            //  console.log(res); // 那么可以发送登入请求
            //新语法可链入
            //？.是先判断一下res是不是undefined如果是undefined就不往后链入只要是转化为布尔值都可以用
            if (res?.data?.state) {
              //验证码正确
              // 发送登入请求
              Userapi.loginApi({ username, password }).then((res) => {
                //  console.log(res);
                if (res.data.state) {
                  //判断一下登入的用户信息是否正确
                  // console.log(this.$store);
                  // 测试在登录页发送用户菜单请求
                  // this.$store.dispatch("FETCH_MENULIST")
                  
                  //登入成功后做什么
                   
                   loading.close()// 关闭loading动画
                   //跳转后页面消息弹窗设置
                   this.$message.success({
                     message:"登入成功，正在跳转...",
                     type:"success",
                    duration:1000
                   })
                  //res.data.userInfo包含当前用户的信息，这个信息会被其他组件共享，放到vuex中
                  this.SET_USERINFO(res.data.userInfo);
                  // 跳转之前将用户的信息存储到本地
                  localStorage.setItem(
                    "bd-userInfo",
                    JSON.stringify(res.data.userInfo)
                  );
                  localStorage.setItem("permissionButtons",JSON.stringify(res.data.permission.buttons))
                  //token也要存储到本地
                  localStorage.setItem("bd-token", res.data.token);
                  // 页面需要跳转
                  this.$router.push("/");
                }else{
                  //用户信息不正确
                   // 关闭loading动画
                   loading.close()
                }
              });
              
            } else {
              // 验证码错误，清空验证码刷新验证码 输入框获得焦点
              // 关闭loading动画
              loading.close()
              this.loginForm.captcha = "";
              this.fetchCaptcha();
              // console.log(this.$refs.captcha);获得输入框的实例
              this.$refs.captcha.focus();
            }
          });
        } else {
          //表单验证不通过
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  watch: {
    isErweiLogin(newVal,oldVal){//监听二维码登入的字段
      // console.log(newVal);newVal为true的时候切换成二维码
      if(newVal){
        // 已经切换成了二维码登入
        // 1.通过socket.io和服务器建立scoket连接
        let socket=io("wss://chst.vip");
       // 2.监听socket连接成功实践，发送请求请求二维码地址
        socket.on("connectSuccess",(data)=>{
          // console.log(data);
          // console.log('连接成功');
          // 将sid存到本地 sid是客户端唯一标识
          let {sid}=data ;
          localStorage.setItem("bd-sid",sid)
        // 3.通过qrcode将二维码地址生成二维码
          this.getQrcode();
        })  
        
        // 4.用户扫描二维码
        // 5.监听socket事件 scancodeSuccess(这个事件不是scoket.io定义的，是前后端约定的)获取到wechatCode
        socket.on("scancodeSuccess",(data)=>{
          // console.log('扫码成功');
          //  console.log(data);
          //  6.请求users/wechatCodeLogin，传递wechatCode
           if(data.state){ // 7.判断成功失败
             //扫码成功
            // 显示遮罩
            this.isScanCodeSuccess=true;
            Userapi.wechatLoginApi(data.wechatCode)
            .then((res)=>{
              if(res.data.state){
                // 登入成功
                // 将用户信息和token存储起来
                // 1.将token存到本地
                localStorage.setItem("bd-token",res.data.token);
                // 2.将uerInfo存到本地
                localStorage.setItem("bd-userInfo",JSON.stringify(res.data.userInfo))
                // 按钮权限
                localStorage.setItem("permissionButtons",JSON.stringify(res.data.permission.buttons))
                // 3.将用户信息保存到vuex
                this.SET_USERINFO(res.data.userInfo)
                // 4.跳转首页
                this.$router.push("/")
              }
            })
           }else{
             //提示扫码失败
              this.$message.error("扫码失败")
           }
        });
        socket.on("invalidCode",(data)=>{
            // console.log(data);
						this.qrStyle.backgroundImage = `url(${codeInvalindImg})`; //显示二维码失效的标志
						this.isScanCodeSuccess = true; //显示遮罩
						this.qrtip="二维码失效,请点击刷新二维码"
        })
       
      }else{
        // 切换成普通登入
        // 二维码遮罩关闭
        this.isScanCodeSuccess=false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.login-cantainer {
  position: relative;
  .video {
    position: fixed;
    z-index: -2;
  }
  .bg2 {
     position: fixed;
    // top: 150px;
     left: -100px;
    // z-index: -1;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .login-loginForm {
    .erwei{
      height:308px;
      p{
        padding-top: 50px;
        color: white;
        padding-left: 130px;
      }
    }
   .erwei .img {
		display: inline-block;
		position: relative;
		width: 200px;
		height: 200px;
		img {
			position: absolute;
			left: 120px;
		}
  
		.mask {
			width: 100%;
			height: 100%;
			opacity: 0.8;
			background-color: #fff;
			position: absolute;
			left: 120px;
			// background-image: url("../../assets/img/成功.png");
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center;
			cursor: pointer;
		}
	}
    position: fixed;
    top: 100px;
    right: 100px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    padding-right: 40px;
    .jiaobiao{
      font-size: 60px;
      color: #fff;
      position: absolute;
      right: -1px;
      top:-1px;
      cursor: pointer;
      opacity: .6;
    }
    /deep/.captcha {
      width: 100px;
    }
    .captchaSvg {
      position: absolute;
      top: -5px;
      right: 10px;
    }
    //设置不上在前面加deep
    /deep/.el-input__inner {
      width: 250px;
      padding-right: 50px;
    }

    /deep/.el-form-item__label {
      color: white;
    }
    /deep/.title {
      text-align: center;
      margin-bottom: 30px;
      padding-left: 80px;
      padding-top: 30px;
      color: white;
      position: relative;
    }
    .el-button {
      width: 200px;
      margin-left: 20px;
      margin-top: 30px;
      margin-bottom: 30px;
      background-color: rgba(59, 41, 41, 0.616);
    }
    
  }
}
</style>
